<template>
	<view class="container">
		<view class="intro">
			<image src="../../static/lolollo.png"></image>
			<view class="tips">
				新思路科技授权登录
				<br>
				需要您授权登录后才可以继续操作~
			</view>
		</view>
		<view class="bottom">
			
				<button type="primary"  class="login-btn"  @click="login">
					<image src="/static/images/mine/wechat.png"></image>
					微信一键登录
				</button>
		</view>
	</view>
</template>

<script>
	import Member from '@/api/member'
	import {mapMutations} from 'vuex'
	
	export default {
		data() {
			return {
				openid:""
			}
		},
		methods: {
			...mapMutations(['SET_MEMBER']),
			// async getUserInfo(e) {
			// 	const {errMsg, userInfo} = e.detail
			// 	if(errMsg !== "getUserInfo:ok") {
			// 		uni.showModal({
			// 			title: '提示',
			// 			content: '您取消了授权登录，请重新授权',
			// 			showCancel: false
			// 		})
					
			// 		//没有授权登录就用默认的用户信息
			// 		this.SET_MEMBER(Member)
			// 		uni.navigateBack()
					
			// 		return
			// 	} else {
			// 		const {avatarUrl: avatar, city, country, gender, nickName: nickname, province} = userInfo
			// 		const member = Object.assign(Member, {avatar, city, country, gender, nickname, province})
			// 		this.SET_MEMBER(member)
					
			// 		uni.navigateBack()
			// 	}
			login() {
				// 提醒:如果遇到this未定义问题,需要在方法开始的时候，执行下面的代码，然后将后面的this换成that。
				// let that = this
			
				// 步骤1：调用uni.getUserProfile()，弹出授权窗口
				uni.getUserProfile({
					desc: '注册', // 这个参数是必须的，desc属性（声明获取用户个人信息后的用途）后续会展示在弹窗中，请开发者谨慎填写。
					success: (res) => {
						// 用户点击了允许，拿到用户信息
						console.log("用户信息: " + JSON.stringify(res.userInfo));
						let userInfo = res.userInfo;
			
						//  步骤2：调用uni.login()，获取code
						uni.login({
							provider: 'weixin', // 登录服务提供商，这里是weixin
							success: (res2) => {
								uni.showLoading({
									title: '登录中'
								})
								// 获得code
								var code = res2.code
								console.log("获取code成功: " + JSON.stringify(res2));
			
								// 步骤3：向后端服务器发送请求，带上参数：code和用户信息
								var data={info:JSON.stringify({
											"code": code,
											"nickName": userInfo.nickName,
											"gender": userInfo.gender,
											"city": userInfo.city,
											"country": userInfo.country,
											"language": userInfo.language,
											"province": userInfo.province,
											"avatarUrl": userInfo.avatarUrl
										})};
								this.$api.login(data
								).then(res=>{
									console.log(res.openid)
									
									uni.hideLoading()
									
									// 		// 步骤4：处理业务逻辑
									// 		// 比如：更换昵称和头像
									const {avatarUrl: avatar, nickName: nickname,} = userInfo
									
									
									const member = Object.assign(Member, {avatar, nickname,})
									member.openid=res.openid;
									this.SET_MEMBER(member)
									uni.navigateBack()
								}).catch(err => {
									// 登录失败
											uni.hideLoading()
											uni.showToast({
												title: '登录失败',
												icon: 'none'
											});
											uni.navigateBack()
								})
								
								
								
							}
						})
					},
					fail: (err) => {
						// 用户点击了拒绝
						uni.showToast({
							title: '您点击了拒绝',
							icon: 'none'
						})
						
						uni.navigateBack()
						console.log("用户点击了拒绝" + JSON.stringify(err));
					}
				})
			}
			
			},
			
			
			// login() {
			// 	this.SET_MEMBER(Member)
			// 	uni.navigateBack()
			// }
		
	}
</script>

<style lang="scss" scoped>
	.intro {
		width: 100%;
		height: 60vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		font-size: $font-size-base;
		color: $text-color-assist;
		
		image {
			width: 165rpx;
			height: 165rpx;
		}
		
		.tips {
			line-height: 72rpx;
			text-align: center;
		}
	}
	
	.bottom {
		height: 40vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 40rpx;
		
		.login-btn {
			width: 100%;
			border-radius: 50rem !important;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 0;
			
			image {
				width: 36rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}
		
		.row {
			.grid {
				width: 20%;
				image {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}
</style>